<template>
  <div>
    <div class="ml-15px mr-15px">
      <Tabs
        class="bg-white"
        v-model:activeKey="activeKey"
        centered
        style="margin-top: 15px; border-radius: 8px"
      >
        <TabPane key="1" :tab="tabName1" force-render />
        <TabPane key="2" :tab="tabName2" force-render />
      </Tabs>
    </div>
    <Row v-show="activeKey == '1'">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="danger" @click="handleKickout"> 强制退出 </a-button>
          <a-button type="primary" @click="handleDeleteBatch"> 删除 </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'leftBottom',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template> </BasicTable
    ></Row>
    <Row v-show="activeKey == '2'">
      <BasicTable @register="registerTableOffline">
        <template #toolbar>
          <a-button type="primary" @click="handleDeleteBatch"> 删除 </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'leftBottom',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template> </BasicTable
    ></Row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, h, ref, onMounted } from 'vue';
  import { Row, Tabs, TabPane } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './onlineList.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { listOnlineUser, delOnlineUser, forceLogout } from '/@/api/system/system';
  import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    name: 'OnlineList',
    components: { BasicTable, TableAction, Row, Tabs, TabPane },
    setup() {
      const activeKey = ref('1');
      const userStore = useUserStore();
      let serverInfo = userStore.getServerInfo;
      const { createMessage, createConfirm } = useMessage();

      const [registerTable, { reload, getSelectRowKeys }] = useTable({
        title: '在线人员',
        api: listOnlineUser,
        columns,
        formConfig: {
          labelWidth: 100,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
          isOnline: true,
        }, //额外的参数
        rowSelection: {
          type: 'checkbox',
          columnWidth: 40,
        },
        clickToRowSelect: false,
        beforeFetch: (info) => {
          let newInfo = info;
          if (newInfo.dates && newInfo.dates.length > 0) {
            newInfo.beginDate = newInfo.dates[0];
            newInfo.endDate = newInfo.dates[1];
            delete newInfo.dates;
          }
          if (newInfo.datesMobile && newInfo.datesMobile.length > 0) {
            newInfo.beginDateMobile = newInfo.datesMobile[0];
            newInfo.endDateMobile = newInfo.datesMobile[1];
            delete newInfo.datesMobile;
          }
          return newInfo;
        },
        useSearchForm: true,
        showTableSetting: true,
        size: serverInfo.tableDensity || 'middle',
        bordered: serverInfo.tableBordered,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        rowKey: 'userName',
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      const [
        registerTableOffline,
        { reload: reloadOffline, getSelectRowKeys: getSelectRowKeysOffline },
      ] = useTable({
        title: '离线人员',
        api: listOnlineUser,
        columns,
        formConfig: {
          labelWidth: 100,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
          isOnline: false,
        }, //额外的参数
        rowSelection: {
          type: 'checkbox',
          columnWidth: 40,
        },
        clickToRowSelect: false,
        beforeFetch: (info) => {
          let newInfo = info;
          if (newInfo.dates && newInfo.dates.length > 0) {
            newInfo.beginDate = newInfo.dates[0];
            newInfo.endDate = newInfo.dates[1];
            delete newInfo.dates;
          }
          if (newInfo.datesMobile && newInfo.datesMobile.length > 0) {
            newInfo.beginDateMobile = newInfo.datesMobile[0];
            newInfo.endDateMobile = newInfo.datesMobile[1];
            delete newInfo.datesMobile;
          }
          return newInfo;
        },
        useSearchForm: true,
        showTableSetting: true,
        size: serverInfo.tableDensity || 'middle',
        bordered: serverInfo.tableBordered,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        rowKey: 'userName',
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      const tabName1 = ref('在线人员');
      const tabName2 = ref('离线人员');

      async function handleDelete(record: Recordable) {
        await delOnlineUser({ userNames: record.userName }).then(() => {
          handleSuccess();
        });
      }

      async function handleDeleteBatch() {
        let checkes;
        if (activeKey.value == '1') {
          checkes = getSelectRowKeys();
        } else {
          checkes = getSelectRowKeysOffline();
        }
        console.log('checkes', checkes);
        if (checkes.length == 0) {
          createMessage.warn('请选择记录');
          return;
        }

        createConfirm({
          iconType: 'warning',
          title: () => h('span', '您确定删除么？'),
          onOk: async () => {
            let ids = checkes.join(',');
            await delOnlineUser({ userNames: ids });
            createMessage.success('操作成功');
            if (activeKey.value == '1') {
              reload();
            } else {
              reloadOffline();
            }
          },
        });
      }

      function handleSuccess() {
        if (activeKey.value == '1') {
          reload();
        } else {
          reloadOffline();
        }
      }

      const handleKickout = async () => {
        let checkes = getSelectRowKeys();

        console.log('checkes', checkes);
        if (checkes.length == 0) {
          createMessage.warn('请选择记录');
          return;
        }

        createConfirm({
          iconType: 'warning',
          title: () => h('span', '您确定要强制退出么？'),
          onOk: async () => {
            let ids = checkes.join(',');
            await forceLogout({ userNames: ids });
            createMessage.success('操作成功');
            if (activeKey.value == '1') {
              reload();
            } else {
              reloadOffline();
            }
          },
        });
      };

      return {
        registerTable,
        handleDelete,
        handleSuccess,
        handleDeleteBatch,
        tabName1,
        tabName2,
        registerTableOffline,
        activeKey,
        handleKickout,
      };
    },
  });
</script>
